<template>
  <view class="add-content container">
    <yh_input
      label="姓名"
      placeholder="请输入"
      required="true"
      v-model="name"
    />
    <yh_input
      label="性别"
      placeholder="请选择"
      v-model="sex"
      disabled="true"
      image="true"
      required="true"
      @click="handleSelectClick('sex', true)"
    />
    <yh_input
      style="margin-top: 7px"
      label="公司"
      placeholder="请输入"
      v-model="company"
    />
    <yh_input label="部门" placeholder="请输入" v-model="department" />
    <yh_input label="职位" placeholder="请输入" v-model="position" />
    <view class="unit-title">
      <view class="unit-title-left">联系方式</view>
    </view>
    <view class="select-type-input">
      <yh_select_type v-model="mobileType" required="true" />
      <yh_input placeholder="请输入" v-model="mobileNumber" />
    </view>
    <view class="select-type-input">
      <yh_select_type v-model="mobileType" required="true" />
      <yh_input
        placeholder="请输入"
        v-model="mobileNumber"
        iconName=".icon-shanchuhang_zhihui"
        iconSize="14"
        iconColor="#cccccc"
      />
    </view>
    <view class="add-mobile-box">
      <view class="add-mobile">
        <nut-icon
          font-class-name="iconfont"
          class-prefix="iconfont"
          name=".icon-tianjia_hongdi"
          size="18"
          color="#155BD4"
          class="add-mobile-icon"
        />
        <text class="add-mobile-text">添加电话</text>
      </view>
    </view>

    <yh_input label="传真" placeholder="请输入" v-model="fax" />
    <yh_input
      style="margin-top: 7px"
      label="工作邮箱"
      placeholder="请输入"
      v-model="workEmail"
    />
    <yh_input
      style="margin-top: 7px"
      label="公司地址"
      placeholder="请输入"
      v-model="companyAddress"
    />
    <yh_input
      style="margin-top: 7px"
      label="公司网站"
      placeholder="请输入"
      v-model="website"
    />
    <yh_input
      style="margin-top: 7px"
      label="备注"
      placeholder="请输入"
      v-model="remark"
    />
    <view class="submit_button">
      <nut-button
        class=""
        size="large"
        type="primary"
        shape="square"
        color="#CCCCCC"
        @click="handleGo('')"
        >保存
      </nut-button>
    </view>

    <nut-popup
      closeable
      close-icon-position="top-right"
      position="bottom"
      v-model:visible="selectShow"
      round
      :style="{ height: '216px' }"
      pop-class="popup_select"
    >
      <view class="title">{{ selectedOptions.name }}</view>
      <view class="content">
        <view
          v-for="(item, index) in selectedOptions.list"
          :key="index"
          class="content-item"
          @click="handOptionsSelected(item, selectedOptions.type)"
          >{{ item }}
        </view>
      </view>
    </nut-popup>
    <nut-popup
      position="right"
      v-model:visible="selectRightShow"
      :style="{ height: '100%', width: '18rem' }"
      pop-class="popup_right_select"
    >
      <view class="title">{{ architectureTiTle }}</view>
      <view class="content">
        <nut-collapse
          v-model:active="activeName"
          :accordion="true"
          icon="down-arrow"
        >
          <nut-collapse-item
            v-for="(items, index) in options"
            :key="index"
            :title="items.name"
            :name="index"
            :sub-title="'展开'"
          >
            <nut-button
              v-for="(item, index) in items"
              :key="index"
              shape="square"
              color="#F7F7F7"
              >{{ item }}
            </nut-button>
          </nut-collapse-item>
        </nut-collapse>
      </view>
    </nut-popup>
  </view>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import Taro from "@tarojs/taro";
import yh_input from "@/components/yh-input.vue";
import yh_select_type from "@/components/yh-select-type.vue";

export default {
  name: "add-content",
  components: { yh_input, yh_select_type },
  setup() {
    const state = reactive({
      name: "",
      sex: "",
      company: "",
      department: "", //部门
      position: "", //职位
      mobileType: "1", //号码类别
      mobileNumber: "", //电话号码
      fax: "",
      workEmail: "",
      companyAddress: "",
      website: "",
      remark: "",
      selectShow: false,
      selectOptions: {
        sex: {
          type: "sex",
          name: "性别",
          list: ["男", "女"],
        },
      },
      selectedOptions: {},
    });
    const handleSelectClick = (
      options: string,
      selectShow: boolean = false
    ) => {
      console.log(options);
      console.log(selectShow);
      state.selectedOptions = state.selectOptions[options];
      state.selectShow = selectShow;
    };
    //handOptionsSelected
    const handOptionsSelected = (
      selectedValue: string,
      selectedOptionName: string
    ) => {
      state.selectShow = false;
      state[selectedOptionName] = selectedValue;
      console.log("selectedValue is :" + selectedOptionName);
      console.log("selectedValue is :" + selectedValue);
    };
    const handleGo = (url: string) => {
      Taro.navigateTo({
        url: url,
      });
    };

    return {
      ...toRefs(state),
      handleSelectClick,
      handOptionsSelected,
      handleGo,
    };
  },
};
</script>

<style lang="scss">
.select-type-input {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.add-mobile-box {
  width: 100%;
  background: #ffffff;
  .add-mobile {
    width: 100%;
    height: 44px;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #155bd4;
    line-height: 18px;
    margin-left: 17px;
    border-bottom: 1px solid #eeeeee;
    &-text {
      padding: 0 0 0 3px;
    }
  }
}

.unit-title {
  padding-top: 20px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  &-left {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }
  &-right {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 14px;
    font-weight: 400;
    color: #155bd4;
    line-height: 18px;
    align-items: center;
  }
}
</style>
